<template>
	<view>
		<!--顶部-->
		<view class="topBG">
			<view class="top">
				<view class="logoCon">
					<image src="../../static/classesimg/logo.jpg">
				</view>
				<view class="banner">
					<view class="fs30 bannerTitle">超级外教 Super Coach</view>
					<view class="bannerDesc">科技和人文，改变你的认知</view>
				</view>	
			</view>
			<!--滑动-->
			<view class="member">
				<view class="fs30 forSale">在售会员卡</view>
				<view class="fs30 myCard">我的会员卡</view>
			</view>
		</view>
		
		<!--会员卡界面-->
		<view class="memberCards" v-for="(item,index) in memberCards">
			<view class="card">
				<view class="fs30 cardName">{{item.name}}</view>
				<view class="cardAmount">
					<view class="amountLogo">¥</view>
					<view class="amount">{{item.amount}}</view>
				</view>
				<view class="sidebar">
					<view class="cardStats"> {{item.stats}}</view>
					<view class="balance">{{item.balance}}</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	 
	export default {
		 
		data() {
			return{
				memberCards:[],
			};
		},
		watch: {
		 
		},
		onPageScroll(e) {
			 
		},
		onLoad(e) {
			// 获取邀请码保存到本地
			this.loadmemberCards();
		},
		//下拉刷新
		onPullDownRefresh() {
		 
		},
		//加载更多
		onReachBottom() {
		 
		},
		onHide() {
			//离开页面时关闭吸顶功能,用于处理h5环境运行下'bottom' of null报错的问题
			this.enable = false
		},
		onShow() {
		 
		},
		methods: {
			
			loadmemberCards(){
			 	let mc = [
			 		{
						name:"口语特惠卡（共12次课）",
						stats:"次卡 永久有效",
						balance:"余额：12次",
						amount:"600",
			 		},
					{
						name:"会员卡",
						stats:"储值卡 永久有效",
						balance:"余额：600元",
						amount:"600",
					},
					{
						name:"雅思特惠卡（共12次课）",
						stats:"次卡 永久有效",
						balance:"余额：12次",
						amount:"900",
					},
					{
						name:"体验课",
						stats:"次卡 永久有效",
						balance:"余额：1次",
						amount:"80",
					},
			 	];
				this.memberCards = mc ;
			}
			 
		}
		
	}
</script>

<style lang="scss">
	page {
		background: #F2F2F7;
	}
	.fs30{
		font-size: 30rpx;
	}
	.topBG{
		border: 2rpx solid #ffffff;
		background-color: #ffffff;
		width: 100%;
		margin-top: 0rpx;
	}
	.top{
		margin: 20rpx 20rpx 0rpx 20rpx;
		height:180rpx;
		border: 0rpx solid #ff0000;
	}
	.logoCon{
		border:0rpx solid #ff0000;
		border-radius: 10rpx;
		float:left;
		margin:10rpx;
		padding: 0rpx 0rpx 0rpx 0rpx;
		width: 20%;
	}
	.logoCon image{
		margin: 0rpx;
		height: 140rpx;
		border-radius: 10rpx;
	}
	.banner{
		border:0rpx solid #ff0000;
		float: right;
		margin-right: 220rpx;
		margin-top: 40rpx;
	}
	.bannerTitle{
		font-weight: bold;
	}
	.bannerDesc{
		padding-top: 20rpx;
		font-size: 20rpx;
		color: #aeaeae;
	}
	.member{
		border:0rpx solid #ff0000;
		margin: 0rpx;
		width:100%;
		height:50rpx;
	}
	.forSale{
		border-bottom: 4rpx solid #000000;
		float:left;
		margin-left: 90rpx;
		font-weight: bold;
		padding-bottom: 15rpx;
	}
	.myCard{
		border:0rpx solid #ff0000;
		float:right;
		margin-right: 90rpx;
		color: #aeaeae;
	}
	.memberCards{
		width: 100%;
		margin-top: 20rpx;
	}
	.card{
		border:0rpx solid #ff0000;
		border-radius: 20rpx;
		height: 180rpx;
		background-image: url("../../static/classesimg/cardBG.jpg");
		margin: 20rpx 20rpx;
		padding-top: 30rpx;
	}
	.cardName{
		color: #ffffff;
		margin-left: 20rpx;
		font-weight: bold;
	}
	.cardAmount{
		border:0rpx solid #ff0000;
		float:right;
		margin-right: 20rpx;
	}
	.amountLogo{
		float: left;
		font-size: 26rpx;
		color: #ffffff;
		margin-top: 15rpx;
		margin-right: 10rpx;
	}
	.amount{
		float: right;
		font-size: 40rpx;
		color: #ffffff;
	}
	.sidebar{
		border:0rpx solid #ff0000;
		margin-top: 20rpx;
		margin-left: 20rpx;
		height: 60rpx;
		width: auto;
		display: inline-block;
	}
	.cardStats{
		border:1rpx solid #587a69;
		background-color: #587a69;
		border-radius: 10rpx;
		margin: 0rpx 20rpx 0rpx 0rpx;
		float: left;
		height:50rpx;
		color: #ffffff;
		text-align: center;
		padding: 10rpx 20rpx;
		font-size: 20rpx;
	}
	.balance{
		float:right;
		color: #cfcfcf;
		font-size: 20rpx;
		margin-top: 10rpx;
	}
	

</style>